<template>
    <div>
        <!-- <van-uploader v-model="fileList" :after-read="afterRead"   :max-count="1" /> -->
         <!-- 文件上传简单 -->
        <!-- <input type="file" name="" id="btnFile">
        <input type="button" value="上传" name="" id="upload"> -->

        <!-- //弹框 -->
        <van-cell is-link @click="showPopup" >上传</van-cell>
        <van-popup v-model="show"  round position="bottom" :style="{ height: '30%' }">       
             <van-uploader v-model="fileList" :after-read="afterRead"   :max-count="1" class="imgs" />
</van-popup>
    </div>
</template>

<script>
import { Toast } from 'vant';
import axios from 'axios'
export default {
    data() {
        return{
            fileList: [],
            show: false,
        }
    },
    methods:{
        afterRead(file) {
      // 此时可以自行将文件上传至服务器
    //   console.log(file.file);
        let files = file.file
       let formData = new FormData() //创建一个空对象;通过append方法添加数据
            formData.append('file',files)//
            Toast.loading({
                 message: '上传中...',
                forbidClick: true,
                });
              setTimeout(() => {
                        let me = Toast.success('修改成功!');     
                        console.log(me) 
                    }, 2000);
                    // console.log(this.$store.state.uid);
                    let uid = window.sessionStorage.getItem('uid')
                axios.post('/upload',`formData=${formData}&${uid}`).then(res=>{
                console.log(res);
                if(!res){
                    return
                }  
            })
    },
    showPopup() {
      this.show = true;
    },
    },
    mounted:function(){
        let btnFile = document.querySelector("#btnFile")
        document.getElementById('upload').onclick =function(){
            let file = btnFile.files[0];
            console.log(file)
            let formData = new FormData() //创建一个空对象;通过append方法添加数据
            formData.append('file',file)//
            axios.post('/upload',formData).then(res=>{
                console.log(res);
            })
        }
            
        }
    
}
</script>

<style scoped>
    .imgs{
        display: block;
        margin:0 auto;
        background-color: rgb(241, 178, 178);
    }
</style>